<template>
  <div>
      <div class="axios-hearder">
          <h3>axios使用总结(axios是一个基于Promise的HTTP库,用于浏览器和node.js中)</h3>
      </div>
      <div class="axios-content">
            <pre>
                2.创建一个get请求
                //这里的请求都是经过封装后的axios具体代码在项目下src/axiosConfig/axios.js,之后在main.js中
                //放到Vue的原型上  Vue.prototype.$get = get;
                                //Vue.prototype.$post = post;
                                //Vue.prototype.$del = del;
                                //Vue.prototype.$put = put;然后就可以直接使用了
                $get(this.url, {
                    params: {
                        'userId': this.userId,
                    }
                }).then( (res)=> {
                    if (res.data.success) {
                        this.list = res.data.result;
                    } else {
                        alert('faild');
                    }).catch(error=>{
                        alert(error);
                    })
            </pre>
            <pre>
                3.创建一个post请求
                $post(this.url, {
                    data: {
                        userName: this.user.userName,
                        password: this.user.password
                    }
                 }).then((res)=>{
                     if (res.data.success) {
                        alert('登录成功');
                     } else {
                         alert('登录失败');
                     }
                 }).catch((res) => {
                     alert('捕捉到的错误信息');
                 })
            </pre>
           
            <pre>
                4.创建一个delete请求
                $del(this.url, {
                    data: {
                        userId: this.userId
                    }
                 }).then((res)=>{
                     if (res.data.success) {
                        alert('删除成功'');
                     } else {
                         alert('删除失败');
                     }
                 }).catch((res) => {
                     alert('捕捉到的错误信息');
                 })
            </pre>
            <pre>
                4.创建一个put请求
                $put(this.url, {
                    data: {
                        user: this.user
                    }
                 }).then((res)=>{
                     if (res.data.success) {
                        alert('修改成功'');
                     } else {
                         alert('修改失败');
                     }
                 }).catch((res) => {
                     alert('捕捉到的错误信息');
                 })
            </pre>
          </div>
  </div>
</template>

<script>
export default {
name:'UseAxios',
}
</script>

<style scoped>
.axios-hearder{
    text-align: center;
}
.axios-content{
     margin-left: 10px;
      margin-top: 30px;
      display: flex;
      flex-wrap:wrap;
      justify-content: center;
}
pre{
    margin-left: 10px;
    margin-right: 10px;
    background: black;
    color: chartreuse;
    width: 40%;
    height: 20%;
}
</style>